{# 继承注册页面父模板 #}
{% extends 'register/base_register.html' %}

{% block title %}
    企业注册 - 学生实习与就业管理系统
{% endblock %}

{% block user %}
    企业注册
{% endblock %}

{% block form %}
    <form id="form" action="{% url 'organization:register' %}" method="post">
        {% csrf_token %}
        <div class="form-group position-relative has-icon-left mb-4">
            <input type="text" class="form-control form-control-xl" name="org_name" placeholder="名称">
            <div class="form-control-icon"><i class="bi bi-person"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="email" type="text" class="form-control form-control-xl" name="email"
                   placeholder="邮箱">
            <div class="form-control-icon"><i class="bi bi-mailbox"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="phone_number" type="text" class="form-control form-control-xl" name="phone_number"
                   placeholder="电话">
            <div class="form-control-icon"><i class="bi bi-phone"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="address" type="text" class="form-control form-control-xl" name="address"
                   placeholder="地址">
            <div class="form-control-icon"><i class="bi bi-globe"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="password" type="password" class="form-control form-control-xl" name="password"
                   placeholder="输入密码">
            <div class="form-control-icon"><i class="bi bi-shield-lock"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="confirm_pwd" type="password" class="form-control form-control-xl" name="confirm_pwd"
                   placeholder="再次输入密码">
            <div class="form-control-icon"><i class="bi bi-shield-lock"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="description" type="text" class="form-control form-control-xl" name="description"
                   placeholder="企业介绍">
            <div class="form-control-icon"><i class="bi bi-text-center"></i></div>
        </div>
        <br>
        <div class="form-group position-relative has-icon-left mb-4">
            <input type="text" style="width: 50%;display: inline-block" class="form-control form-control-xl"
                   id="captcha" name="captcha" placeholder="请输入验证码">
            <a href="#" onclick="refreshCaptcha()">
                <img src="{% url 'organization:generate_code' %}" alt="验证码" class="bsa-cursor-pointer" id="captcha-image"/>
            </a>
        </div>
        <div id="error-container"></div>
        <button class="btn btn-primary btn-block btn-lg shadow-lg mt-5" type="submit">注册</button>
    </form>
{% endblock %}

{# 若存在账号直接跳转去登录页面 #}
{% block jump %}
    <p class='text-gray-600'>已拥有账户？<a href="{% url 'organization:login' %}" class="font-bold">登录</a></p>
{% endblock %}


{% block formvalidation %}
<script>
    // 前端表单验证
    $('#form').formValidation({
        err: {
          clazz: 'invalid-feedback',
          container: '#error-container',
          parent: '#form',
        },
        fields: {
            org_num: {
                validators: {
                    notEmpty: {
                        message:"账号不能为空",
                    },
                    remote: {
                        type: 'post',  // post提交org_num
                        url: '{% url 'organization:register_check_number' %}',  // 表单提交的位置
                        headers: {'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()},  // 注意放到引号里面
                        data: {
                            type: 'save',
                        },
                        //请求失败的消息
                        message: "账号已存在！",
                        delay: 1000
                    }
                }
            },
            org_name: {
                validators: {
                    notEmpty: true,
                    remote: {
                        type: 'post',  // post提交org_name
                        url: '{% url 'organization:register_check_number' %}',  // 表单提交的位置
                        headers: {'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()},  // 注意放到引号里面
                        data: {
                            type: 'save',
                        },
                        //请求失败的消息
                        message: "该名字已存在！",
                        delay: 1000
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: "密码不能为空"
                    },
                    callback: {
                        message: "密码输入错误",
                        callback: function (value, validator, $field) {
                            if (value === '') {
                                return true;
                            }

                            if (value.length < 8 || value.length > 15) {
                                return {
                                    valid: false,
                                    message: "密码长度不能小于8位或大于15位"
                                };
                            }

                            if (value === value.toLowerCase()) {
                                return {
                                    valid: false,
                                    message: '密码至少包含一个大写字母'
                                }
                            }

                            if (value === value.toUpperCase()) {
                                return {
                                    valid: false,
                                    message: '密码至少包含一个小写字母'
                                }
                            }

                            if (value.search(/[0-9]/) < 0) {
                                return {
                                    valid: false,
                                    message: '它必须至少包含一个数字'
                                }
                            }
                            return true;
                        }
                    }
                }
            },
            confirm_pwd: {
                validators: {
                    identical: {
                        field: 'password',
                        message: '和密码不一致'
                    }
                }
            },
            captcha: {
                validators: {
                    notEmpty: true,
                    remote: {
                        type: 'post',
                        url: '{% url 'organization:verify_code' %}',
                        headers: {'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()},  // 注意放到引号里面
                        data: {
                            type: 'save',
                        },
                        //请求失败的消息
                        message: "系统繁忙,请稍后再试",
                        delay: 1000
                    }
                }
            },
            phone_number: {
                validators: {
                    notEmpty:{
                        message:"企业电话号不能为空"
                    },
                }
            },
            email: {
                validators: {
                    notEmpty:{
                        message:"企业邮箱不能为空"
                    },
                }
            },
            address: {
                validators: {
                    notEmpty:{
                        message:"企业地址不能为空"
                    },
                }
            },
            description: {
                validators: {
                    notEmpty:{
                        message:"企业地址不能为空"
                    },
                }
            },
        }
    }).on('success.form.fv', function (e) {
        //阻止表单提交
        e.preventDefault();
        //得到表单对象
        var $form = $(e.target);
        let data = $form.serialize();
        //得到序列化数据
        $.ajax({
            url: "{% url 'organization:register' %}",
            method: 'post',
            headers: {'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()},  // 注意放到引号里面
            data: data,
        }).then(function (res) {
            if (res.code === 200) {
                // 注册成功
                alert('注册成功')
                // 注册成功后跳转到登录页面
                window.location.href = "{% url 'organization:login' %}";
            } else {
                // 注册失败
                alert('注册失败')
                // 注册失败重新注册
                window.location.href = "{% url 'organization:register' %}";
            }
        });
    });
</script>
{# 刷新验证码 #}
<script>
function refreshCaptcha() {
  $.get("{% url 'organization:generate_code' %}", function(data) {
  // 向后端发送AJAX请求，获取新的验证码图像
  $('#captcha-image').attr('src', "{% url 'organization:generate_code' %}");
  });
}
</script>
{% endblock %}
